<template>
<div id="out30">
    <div id="top30">注册</div>
    <p class="women">我们家对象密码发生的你的世界，请注意查收。</p>
    <input type="text" name="phone" id="phone" value="" placeholder="请输入手机号"/>
    <input type="text" name="phone" id="yanzheng" value="" placeholder="请输入手机验证码"/>
    <div class="huoquu">获取验证码</div>
    <input type="text" name="yaoqing" id="yaoqing" value="" placeholder="请输入邀请码"/>
    <a href="#/DengZhuZJ">
    <div class="quxiaoo">取消</div>
    </a>
    <a href="#/DengZhu">
    <div class="wancheng">完成注册</div>
    </a>
</div>
</template>

<script>
	export default {
		name: '',
		methods: {
			round2: function() {
				var regex = /^[1][3,4,5,7,8][0-9]{9}$/;
				$("#out30>#phone").on("input",function(){
					if (regex.test($("#out30>#phone").val())==true) {
					    $("#out30>.huoquu").addClass("huoquu1");
					} else if(regex.test($("#out30>#phone").val())==false){
						$("#out30>.huoquu").removeClass("huoquu1");
					};
				});
			},
		},
		mounted: function() {
			//只有在mounted之后，才可以执行dom操作，也就是说可以在这个方法里面执行那些需要加载立即执行的方法
			this.round2();
		},
	}
</script>

<style>
	#out30{
		background-color: #f2f2f2;
		height: 100vh;
	}
#out30>#top30{
	height: 9.6rem;
	background-color: #e53e42;
	color: #FFFFFF;
	font-size: 3.6rem;
	text-align: center;
	line-height: 9.6rem;
}
#out30>.women{
	font-size: 1.8rem;
	color: #808080;
	text-align: center;
	padding-top: 10rem;
}
#out30 input{
	font-size: 2.4rem;
	padding-left: 8rem;
	box-sizing: border-box;
	margin-top: 2rem;
	margin-left: 6rem;
}
#out30>#phone{
	width: 60rem;
	height: 6rem;
	outline: none;
	border: 0.1rem solid #CCCCCC;
	border-radius: 3rem;
}
#out30>#yanzheng{
	width: 38rem;
	height: 6rem;
	outline: none;
	border: 0.1rem solid #CCCCCC;
	border-radius: 3rem;
}
#out30>#yaoqing{
	width: 60rem;
	height: 6rem;
	outline: none;
	border: 0.1rem solid #CCCCCC;
	border-radius: 3rem;
}
#out30>.huoquu{
	width: 20rem;
	height: 6rem;
	border: 0.1rem solid #CCCCCC;
	border-radius: 3rem;
	background: #FFFFFF;
	font-size: 2.4rem;
	text-align: center;
	line-height: 6rem;
	color: #808080;
	position: absolute;
	right: 6rem;
	top: 31rem;
}
#out30>.huoquu1{
	color: #000000;
	border: 0.1rem solid #000000;
}
#out30 .quxiaoo,#out30 .wancheng{
	display: inline-block;
	width: 24rem;
	height: 6rem;
	background: #FFFFFF;
	font-size: 2.4rem;
	text-align: center;
	line-height: 6rem;
	color: #808080;
	border: 0.1rem solid #CCCCCC;
	border-radius: 3rem;
	margin-left: 6rem;
	margin-top: 8rem;
}
#out30 .wancheng{
	background-color: #e53e42;
	color: #FFFFFF;
	margin-left: 11rem;
}
</style>